<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="page" :show="fail"></u-empty>
		</view>
		<block v-else>
			<view class="upper">
				<view @click="show = true">
					<u-icon size="35" name="calendar"></u-icon>
					<view class="day">{{date}}</view>
				</view>
				<view>
					<text>会员：{{temporaryData.memberCount}}</text>
					<text>粉丝量：{{temporaryData.totalFans}}</text>
				</view>
			</view>
			<view class="lower">
				<view><text>名称</text><text>{{temporaryData.storeName}}</text></view>
				<view><text>等级</text><text>{{temporaryData.levelName}}</text></view>
				<view><text>电话</text><text>{{temporaryData.userName}}</text></view>
				<view><text>新增粉丝</text><text style="color: #E42548;">+{{info.newFansCount}}</text></view>
				<view @click="goToTransaction"><text>新增交易笔数</text><view style="margin-right: 0;border-bottom: none;"><text style="color: #E42548;">+{{info.newTansCount}}笔</text><u-icon name="arrow-right"></u-icon></view></view>
				
			    <view><text>当天交易额</text><text>{{info.todayTradeAmount?info.todayTradeAmount:0}}</text></view>
				<view><text>当月交易额</text><text>{{info.monthTradeAmount}}</text></view>
				<view><text>注册时间</text><text>{{temporaryData.addTime}}</text></view>
			</view>

			<view class="btn" @click="$u.route('/pages/other/newStoreDetail/newStoreDetail',{store_id:info.storeId})">
				进入店铺
			</view>
			<u-picker :default-time="defaultTime" @confirm="confirm" title="年/月/日" safe-area-inset-bottom confirm-color="#FF7200"
			 :params="params" v-model="show" mode="time"></u-picker>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultTime: '',
				show: false,
				loading: true,
				fail: false,
				date: '',
				info: '',
				temporaryData: '',
				params: {
					year: true,
					month: true,
					day: true
				},
				startTime:"",
				endTime:"",
				sameMonth:0,
				sameDay:0
			}
		},
		onLoad(options) {
			this.getCurrentDate();
			//let date = new Date()
			//this.date = date.toLocaleDateString().replace(/\//g, '-');
			// console.log(this.date)
			this.storeId = options.storeId
			this.getData()
			this.temporaryData = uni.getStorageSync('temporaryData');
			
		},
		onUnload() {
			uni.removeStorageSync('temporaryData')
		},
		methods: {
			getCurrentDate(){
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
				let day = currentDate.getDate();
				let lastDay = new Date(year, month, 0).getDate();
				if(month<10){
					month='0'+month;
				}
				if(day<10){
				   day='0'+day;	
				}
				this.date=year + "-" + month + "-" + day;
				this.startTime=year + "-" + month + "-01";
				this.endTime=year + "-" + month + "-" + lastDay;
				console.log(year + "-" + month + "-" + day);
			},
			getData() {
				this.$u.post('sellerstoreotherapply/storeDetail', {
					time: this.date + ' 00:00:00',
					storeId: this.storeId
				}).then(res => {
					this.loading = false
					this.info = res
				}).catch(error => {
					this.loading = false
					this.fail = true
				})
			},
			confirm(e) {
				this.date = `${e.year}-${e.month}-${e.day}`
				this.defaultTime = this.date + ' 00:00:00'
				this.getData()
			},
			goToTransaction(){
				this.$u.route('/pages/user/myTeam/transactionDetail', {
					storeId: this.storeId
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	.btn {
		line-height: 100rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(90deg, #FF3868, #FC6161);
		box-shadow: 1px 10px 15px 2px rgba(255, 78, 70, 0.3);
		border-radius: 20rpx;
		margin: 0 30rpx;
		margin-top: 100rpx;
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lower {
		view {
			display: flex;
			justify-content: space-between;
			margin: 0 30rpx;
			line-height: 80rpx;
			border-bottom: 1rpx solid rgba($color: #000000, $alpha: .1);
		}
	}

	.upper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid rgba($color: #000000, $alpha: .1);

		>view {
			&:first-child {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.day {
					margin-left: 10rpx;
				}
			}

			&:last-child {
				text {
					&:first-child {
						color: #FF4500;
					}

					&:last-child {
						margin-left: 30rpx;
						color: #5CACEE;
					}
				}
			}
		}
	}
</style>
